<script>
export default {
  props: ["node"],
  data() {
    return {};
  },
  render() {
    !this.node.answer ? this.$set(this.node, "answer", null) : null;
    !this.node.options
      ? this.$set(this.node, "options", [
          { label: "选项一", value: 1 },
          { label: "选项二", value: 2 },
        ])
      : null;
    return (
      <el-radio-group
        nativeOnChange={(e) => {
          if (e.target._value) {
            this.node.answer = e.target._value;
          }
          e.stopPropagation();
        }}
        value={this.node.answer}
      >
        {this.node.options.map((item) => {
          if (item.type) {
            return (
              <el-radio
                class="else"
                key={this.node.id + "_" + item.value}
                label={item.value}
              >
                <span>{item.label} </span>
                <el-input
                  value={this.node.other}
                  size="mini"
                  onInput={(e) => {
                    this.node.other = e;
                  }}
                  clearable
                ></el-input>
              </el-radio>
            );
          }
          return (
            <el-radio key={this.node.id + "_" + item.value} label={item.value}>
              {item.label}
            </el-radio>
          );
        })}
      </el-radio-group>
    );
  },
};
</script>

<style scoped>
.el-radio {
  margin: 10px 30px;
  margin-left: 0;
  display: block;
  white-space: normal;
  word-break: break-all;
  line-height: 20px;
  display: flex;
  align-items: center;
}
.el-radio-group{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.else >>>.el-radio__label {
  white-space: nowrap;
}
.else >>>.el-radio__label .el-input{
  width: 80%;
}
</style>